
<template>
  <div>
    <h1>X: {{ x }}, Y: {{ y }}</h1>
  </div>
</template>

<script lang="ts">
import { ref, computed, defineComponent } from "vue";
import useMousePosition from "../hooks/useMousePosition";
export default defineComponent({
  name: "hooks",
  props: {
    msg: {
      required: false,
      type: String,
    },
  },
  setup(props) {
    const count = ref(0);

    const double = computed(() => {
      return count.value * 2;
    });

    const increase = () => {
      count.value++;
    };

    const { x, y } = useMousePosition();

    return {
      count,
      double,
      increase,
      x,
      y,
    };
  },
});
</script>

<style>
</style>
